<template>
  <div class="xuanxiang">
    <div class="xuan_left">
      <div class="xuan_flex">
        <div v-for="(item, index) in mess.sudi" :key="index" class="kuai">
          <img :src="item" alt="" />
        </div>
      </div>
      <div class="bg_zhezhao">
        <img :src="mess.zhezhao" alt="" />
        <button>全部播放</button>
      </div>
    </div>
    <div class="xuan_right">
        
    </div>
  </div>
</template>
<script>
export default {
  name: "Xuanxiang",
  props: ["mess"],
};
</script>
<style lang='less' scoped>
.xuanxiang {
  display: flex;
  .xuan_left {
    width: 335px;
    height: 495px;
    position: relative;
    overflow: hidden;
    .xuan_flex {
      display: flex;
      flex-wrap: wrap;
      .kuai {
        width: 50%;
        img{
            width: 100%;
            display: block;
        }
      }
    }
    .bg_zhezhao {
      position: absolute;
      top:0px;
      img {
        width: 100%;
        height: 495px;
        display: block;
      }
      button{
          width: 120px;
          height: 40px;
          background: transparent;
          border-radius: 40px;
          border: 2px solid #fff;
          position: absolute;
          top: 440px;
          right: 10px;
          color: #fff;
      }
    }
  }
}
</style>
